<template>
  <div class="display-screen">
    <iframe
      name="vue3Frame"
      ref="iframe" width="100%" height="100%"
      frameborder="0" allowfullscreen :src="iframeSrc"
    ></iframe>
  </div>
</template>

<script>
// eslint-disable-next-line
import { removeToken, getToken } from '@/utils'

const MESSAGE_EVENT_LOGIN_SUCCESS = 0
const MESSAGE_EVENT_LOGIN_TIMEOUT = 1
const MESSAGE_EVENT_PAGE_NAVIGATE = 2

export default {
  name: 'DisplayScreen',
  data () {
    return {
      origin: window.location.origin
    }
  },
  computed: {
    iframeSrc () {
      const path = '/visual-yz/'
      let result = process.env.VUE_APP_POST_MESSAGE_ORIGIN || this.origin;

      // 可视化的大屏应该部署在同一服务器相同目录下
      // 如：在线监测系统路径是 /html/adminyz/
      // 那么大屏路径是 /html/visual-yz/
      result += path + '?t=' + Date.now();
      return result;
    },
    userInfo () {
      return this.$store.state.user.userInfo || {}
    }
  },
  beforeDestroy () {
    this.$refs.iframe.onload = null;
    window.removeEventListener('message', this.receiveMessage)
  },
  mounted () {
    const token = getToken()
    const userInfo = this.userInfo
    this.$refs.iframe.onload = () => {
      this.sendMessage({
        userInfo,
        token,
      }, MESSAGE_EVENT_LOGIN_SUCCESS);
    }
    window.addEventListener('message', this.receiveMessage, false);
  },
  methods: {
    receiveMessage (evt) {
      const fromOrigin = process.env.VUE_APP_POST_MESSAGE_ORIGIN || this.origin;
      const isFromVisual = evt.origin === fromOrigin;
      if (isFromVisual) {
        const { type, message } = evt.data;
        if (type === MESSAGE_EVENT_LOGIN_TIMEOUT) {
          console.log(`[top] receive timeout from [${fromOrigin}].`)
          this.$router.replace({
            name: 'Login'
          }, () => {
            removeToken()
          })
        } else if (type === MESSAGE_EVENT_PAGE_NAVIGATE) {
          console.log(`[top] receive navigation from [${fromOrigin}].`)
          if (message.key === '__enterprise_details__') {
            this.$router.push({
              name: 'EnterpriseAnalysis',
              query: {
                enterpriseCode: message.enterpriseCode,
                enterpriseId: message.enterpriseId
              }
            })
          } else {
            // this.$router.push({
            //   name: 'EnterpriseAnalysis',
            //   query: {
            //     [message.key]: message.value,
            //   }
            // })
            // 点击大屏地图区域跳转至能源监测-区域数据
            this.$router.push({
              path: '/regional-data-presentation/index'
            })
          }
        }
      }
    },
    sendMessage (msg, type) {
      const targetWindow = this.$refs.iframe.contentWindow
      const toOrigin = process.env.VUE_APP_POST_MESSAGE_ORIGIN || this.origin;
      const message = {
        type,
        message: msg
      };
      console.log(`[top] send token to [${toOrigin}].`);
      targetWindow.postMessage(message, toOrigin);
    }
  },
}
</script>

<style scoped>
.display-screen {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
}
</style>
